<template>
	<view>
		<view class="wrapper">
			<view class="left"></view>
			<text></text>
			<view class="right"></view>
		</view>
		<soure url="url"></soure>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://juejin.cn/post/6925311725042892813'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page {
		padding-top: 50px;
	}

	.wrapper {
		display: flex;
		position: relative;
		width: 320px;
		height: 100px;
		margin: auto;
		filter: drop-shadow(2px 2px 3px #999);
	}

	.wrapper view {
		height: 100%;
	}

	.wrapper text {
		position: absolute;
		right: 30%;
		top: 5px;
		height: calc(100% - 10px);
		border-left: 1px dotted #fff;
	}

	.left {
		background: #58a;
		background: radial-gradient(circle at top right, transparent 5px, #44C9A1 0) top right, radial-gradient(circle at bottom right, transparent 5px, #44C9A1 0) bottom right;
		background-size: 100% 60%;
		background-repeat: no-repeat;
		color: white;
		width: 70%;
		border-radius: 5px 0 0 5px;
	}

	.right {
		background: #58a;
		background: radial-gradient(circle at top left, transparent 5px, #44C9A1 0) top left, radial-gradient(circle at bottom left, transparent 5px, #44C9A1 0) bottom left;
		background-size: 100% 60%;
		background-repeat: no-repeat;
		width: 30%;
		color: white;
		border-radius: 0 5px 5px 0;
	}
</style>
